<template>
    <view class="container">
        <!-- 导航栏 -->
        <view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
            <view class="nav-back" @click="goBack">←</view>
            <view class="nav-title">维修</view>
            <view class="nav-actions">···</view>
        </view>

        <!-- 门店信息 -->
        <view class="shop-info">
            <view class="shop-image">
                <image src="/static/image/repair/repair01.png" mode="aspectFill"></image>
            </view>

            <view class="shop-basic-info">
                <view class="shop-name">泰山汽车服务站</view>
                <view class="shop-subtitle">大美汽车保养厂（解放路店）</view>
                <view class="shop-stats">
                    <view class="shop-rating">★★★★ 4分</view>
                    <view class="shop-volume">销量: 556</view>
                </view>
                <view class="shop-hours">营业时间: 周一至周五 早上8:00-晚上22:00</view>
                <view class="shop-location" @click="navigateToMap">
                    <text>位置: 山阳区人民路与解放路交叉口</text>
                    <image src="/static/image/repair/plane@2x.png" class="location-icon" mode=""></image>
                </view>
            </view>
        </view>

        <!-- 服务项目 -->
        <view class="service-section">
            <view class="section-title">服务项目</view>
            <view class="service-list">
                <view class="service-item" v-for="(item, index) in serviceItems" :key="index">
                    <view class="service-name">{{ item.name }}</view>
                    <view class="service-price">¥{{ item.price }} <span class="service-unit">¥60</span></view>
                </view>
            </view>
        </view>

        <!-- 服务评价 -->
        <view class="review-section">
            <view class="section-title">服务评价</view>
            <view class="review-list">
                <view class="review-item" v-for="(item, index) in reviews" :key="index">
                    <view class="review-header">
                        <image :src="item.avatar" class="user-avatar"></image>
                        <view class="user-info">
                            <view class="user-name">{{ item.userName }}</view>
                            <view class="review-date">{{ item.date }}</view>
                        </view>
                        <view class="review-rating">★★★★★</view>
                    </view>
                    <view class="review-content">{{ item.content }}</view>
                </view>
            </view>
        </view>

        <!-- 底部预约按钮 -->
        <view class="bottom-bar">
            <view class="book-button" @click="goToBooking">立即预约</view>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 响应式数据
const statusBarHeight = ref(0); // 状态栏高度
const serviceItems = ref([
    { name: '工时价格（每小时）', price: '35.9' },
    { name: '轮胎', price: '35.9' },
    { name: '洗车', price: '35.9' }
]);

const reviews = ref([
    {
        userName: '黄**',
        date: '2022-12-31',
        content: '洗的非常干净，几个小伙子很用心，态度也很好，强烈推荐来这家洗车店！！！',
        avatar: '/static/image/repair/repair02.png'
    },
    {
        userName: '黄**',
        date: '2022-12-31',
        content: '洗的非常干净，几个小伙子很用心，态度也很好，强烈推荐来这家洗车店！！！',
        avatar: '/static/image/repair/repair02.png'
    },
    {
        userName: '黄**',
        date: '2022-12-31',
        content: '洗的非常干净，几个小伙子很用心，态度也很好，强烈推荐来这家洗车店！！！',
        avatar: '/static/image/repair/repair02.png'
    },
    {
        userName: '黄**',
        date: '2022-12-31',
        content: '洗的非常干净，几个小伙子很用心，态度也很好，强烈推荐来这家洗车店！！！',
        avatar: '/static/image/repair/repair02.png'
    }
]);

// 方法
const goBack = () => {
    uni.navigateBack();
};

const goToBooking = () => {
    // 跳转到预约页面
    uni.navigateTo({
        url: '../booking/booking'
    });
};

const navigateToMap = () => {
    // 跳转到导航页面
    uni.navigateTo({
        url: '../navigation/navigation'
    });
};

// 生命周期钩子
onMounted(() => {
    // 获取状态栏高度，使用推荐的wx.getWindowInfo API
    try {
        const windowInfo = uni.getWindowInfo();
        statusBarHeight.value = windowInfo.statusBarHeight;
    } catch (error) {
        console.error('获取窗口信息失败:', error);
        statusBarHeight.value = 0;
    }
});
</script>

<style>
.container {
    background-color: #f5f5f5;
    min-height: 100vh;
    padding-bottom: 60px;
}

.nav-bar {
    height: 88rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #1E88E5;
    color: white;
    padding: 0 16px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-back {
    font-size: 22px;
}

.nav-title {
    font-size: 18px;
    font-weight: 500;
}

.shop-info {
    background-color: white;
    padding: 16px;
    margin-bottom: 10px;
    margin: 10px;
    border-radius: 15px;
}

.shop-image {
    margin-bottom: 16px;
}

.shop-image image {
    width: 100%;
    height: 200px;
    border-radius: 10px;
}

.shop-basic-info {
    display: flex;
    flex-direction: column;
}

.shop-name {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 8px;
}

.shop-subtitle {
    font-size: 16px;
    color: #333;
    margin-bottom: 10px;
}

.shop-stats {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.shop-rating {
    color: #FFC107;
    margin-right: 15px;
}

.shop-volume {
    font-size: 14px;
    color: #666;
}

.shop-hours {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

.shop-location {
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    font-size: 14px;
    color: #333;
}

.location-icon {
    width: 15px;
    height: 15px;
    margin-left: 20px;
}

.service-section,
.review-section {
    background-color: white;
    padding: 16px;
    margin-bottom: 10px;
    margin: 10px;
    border-radius: 15px;
}

.section-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
}

.service-list {
    display: flex;
    flex-wrap: wrap;
    /* gap: 10px; */
}

.service-item {
    width: 100%;
    /* background-color: #f9f9f9; */
    padding: 15px 0;
    /* border-radius: 8px; */
    border-bottom: 2px #eee solid;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* margin-bottom: 12px; */
}

.service-item:last-child {
    margin-bottom: 0;
}

.service-name {
    font-size: 14px;
    flex: 1;
}

.service-price {
    font-size: 14px;
    color: #FF5722;
    font-weight: bold;
}

.service-unit {
    color: #999;
    font-size: 12px;
    font-weight: normal;
    text-decoration: line-through;
}

.review-item {
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 16px;
}

.review-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.review-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.user-info {
    flex: 1;
}

.user-name {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 2px;
}

.review-date {
    font-size: 12px;
    color: #999;
}

.review-rating {
    color: #FFC107;
    font-size: 14px;
}

.review-content {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

.bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    padding: 10px 16px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.book-button {
    background-color: #1E88E5;
    color: white;
    padding: 12px;
    text-align: center;
    border-radius: 50px;
    font-weight: 500;
    /* width: 100%; */
}
</style>